<template>
	<view class="search">
		<!-- #ifdef MP-WEIXIN -->
		<view class="input">
			<view class="inp_box">
				<input class="inp" type="text" placeholder="输入商品关键字" v-model="keyword" />
				<button class="btn" type="primary" @click="search()">搜索</button>
			</view>
		</view>
		<!-- #endif -->
		<view class="search-item">
			<view class="search-title">
				<view class="f-color">最近搜索</view>
				<view @click="clearSearchData()" class="iconfont icon-lajitong"></view>
			</view>
			<view v-if="searchData.length>0">
				<view class="search-name f-color"
				v-for="(item,index) in searchData"
				:key='index'
				@tap='toSearchList(item)'
				>
					{{item}}
				</view>
			</view>
			<view v-else class="search-end">暂无搜索记录</view>
		</view>
		<view class="search-item">
			<view class="search-title">
				<view class="f-color">热门搜索</view>
			</view>
			<view>
				<view class="search-name f-color">四件套</view>
				<view class="search-name f-color">面膜</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Lines from '@/components/common/Line.vue'
	export default {
		data() {
			return {
				keyword:'',
				// 搜索词记录
				searchData:[]
			}
		},
		// 页面加载
		onLoad() {
			uni.getStorage({
				key:'searchData',
				success:(res)=>{
					this.searchData=JSON.parse(res.data)
				}
			})
		},
		// #ifdef H5 APP-PLUS
		// 监听点击搜索按钮
		onNavigationBarButtonTap(e){
			if(e.float=='right'){
				this.search()
			}
		},
		// 监听软键盘的搜索按钮
		onNavigationBarSearchInputConfirmed() {
			this.search()
		},
		// 监听input输入内容
		onNavigationBarSearchInputChanged(e){
			this.keyword=e.text
		},
		// #endif
		
		components:{
			Lines,
		},
		methods: {
			// 清除搜索记录
			clearSearchData(){
				uni.showModal({
					title:"重要提示",
					content:'是否清除搜索记录',
					cancelText:'取消',
					confirmText:'确定',
					success:(res)=>{
						if(res.confirm){
							this.searchData=[],
							uni.removeStorage({
								key:'searchData'
							})
						}
					}
				})
			},
			// 记录最近的搜索词
			addSearch(){
				// 将关键字添加岛searchData数组中
				let idx=this.searchData.indexOf(this.keyword);
				if(idx<0){
					this.searchData.unshift(this.keyword)
				}else{
					this.searchData.unshift(this.searchData.splice(idx,1)[0])
				}
				uni.setStorage({
					key:'searchData',
					data:JSON.stringify(this.searchData)
				})
			},
			// 判断关键词是否为空和跳转页面
			search(){
				// 如果为空弹出提升
				if(this.keyword==''){
					return uni.showToast({
						title:'关键词不能为空',
						icon:'none'
					})
				}else{
					// 如果不为空跳转页面
					this.toSearchList(this.keyword)
				}
				// 隐藏软键盘
				uni.hideKeyboard()
				// 调用addSearch方法
				this.addSearch()	
			},
			// 点击搜索记录跳转页面
			toSearchList(keyword){
				uni.navigateTo({
					url:"../search-list/search-list?keyword="+keyword+""
				})
			}
		}
	}
</script>

<style scoped>
	.search-item{
		padding: 20rpx;
	}
	.search-title{
		display: flex;
		justify-content: space-between;
	}
	.search-name{
		padding: 4rpx 24rpx;
		margin:10rpx;
		background-color: #E1e1e1;
		border-radius: 30rpx;
		display: inline-block;
		/* float: left; */
	}
	.search-end{
		text-align: center;
	}
	.input{
		padding: 20rpx;
	}
	.inp_box{
		display: flex;
	}
	.inp{
		flex:4;
		background-color: #EBEBEB;
		height: 60rpx;
		text-align: center;
		border-radius: 10rpx;
	}
	.btn{
		flex:1;
		margin-left: 10rpx;
		font-size: 30rpx;
		line-height: 60rpx;
		height: 60rpx;
		background-color: #00B7FF;
	}
</style>
